// 引入工具函数
require('../js/common-js/utils.js')

// 引入当前less
require('../less/sports.less')

// 页面加载完毕
document.ready(function () {
    // console.log('运动');

    // 调用运动顶部导航栏函数,添加到页面顶部
    window.$utils.sportsTopNav('sports')

    // 调用底部导航栏函数,添加到页面底部
    window.$utils.footerNavBar('sports')

    // 获取dom
    let runGoBtn = document.querySelector('#runGoBtn')  //go按钮
    let mapa = document.querySelector('#mapa')  //蒙层地图
    let countDownMask = document.querySelector('#countDownMask') //倒计时蒙层
    let countDownNum = document.querySelector('#countDownNum') //倒计时数字
    let motionMask = document.querySelector('#motionMask') //运动中默认蒙层
    let GPSBtn = document.querySelector('#GPSBtn') //运动中蒙层切换成地图,GPS
    let mapMask = document.querySelector('#mapMask') //运动中地图蒙层
    let pauseButton = document.querySelector('#pauseButton') //运动中暂停按钮框
    let pauseBtn = document.querySelector('#pauseBtn') //运动中暂停按钮
    let continueEndBtn = document.querySelector('#continueEndBtn') //运动中继续&结束框
    let continueBtn = document.querySelector('#continueBtn') //运动中继续按钮
    let endBtn = document.querySelector('#endBtn') //运动中结束按钮
    let toBackBtn = document.querySelector('#toBackBtn') //地图模式返回按钮 
    let locationBtn = document.querySelector('#locationBtn') //地图模式定位按钮 
    let locationBox = document.querySelector('#locationBox') //地图模式跑步信息框
    let finishBtn = document.querySelector('#finishBtn') //运动中完成按钮
    let exerciseBox = document.querySelector('#exerciseBox') //运动中运动结束信息框 
    let runNum = document.querySelector('#runNum') //累积跑步距离 
    let runTime = document.querySelector('#runTime') //跑步用时 
    let runTimeNum = document.querySelector('#runTimeNum') //地图模式中的用时 
    let runAllTime = document.querySelector('#runAllTime') //完成部分总用时  
    let kilNum = document.querySelector('#kilNum') //目前跑步公里数   
    let runPace = document.querySelector('#runPace') //配速  
    let runSpeed = document.querySelector('#runSpeed') //地图蒙层配速   
    let runAvgPace = document.querySelector('#runAvgPace') //地图蒙层结束的平均配速   
    let runLiData = document.querySelector('#runLiData') //地图蒙层距离   
    let kiloNum = document.querySelector('#kiloNum') //地图蒙层结束距离   
    let runCalorie = document.querySelector('#runCalorie') //默认蒙层千卡   
    let runConsumeKcal = document.querySelector('#runConsumeKcal') //地图蒙层结束千卡    
    let sportsDate = document.querySelector('#sportsDate') //地图蒙层结束当前日期    

    // 从本地存储获取当前用户id
    let userId = JSON.parse(localStorage.getItem('user')).userId
    console.log(userId);

    let timerId = null
    let timing = 0
    // 创建蒙层中初始化地图实例    
    mapa = new BMap.Map(mapa)
    // 模拟跑起来经纬度发生改变
    let moveNum = 0.001
    // 定义数组，保存每次的经纬度
    let pointArr = []
    // 跑步距离
    let runKm = 0
    // 千卡
    let kio = 0
    // 平均配速
    let runAvg = 0

    // 页面加载时调用
    initMap()  //初始化地图
    getTotalRun()  //累积跑步距离

    // 封装初始化地图
    function initMap() {
        var map = new BMap.Map("map");
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                // console.log(r);
                let lng = r.longitude;//经度
                let lat = r.latitude;//纬度
                var point = new BMap.Point(lng, lat);
                map.centerAndZoom(point, 12);
                //隐藏地图标记
                let baiduFlags = document.querySelectorAll(".anchorBL");
                baiduFlags.forEach(function (v) {
                    v.style.display = "none";
                })
            }
            else {
                alert('failed' + this.getStatus());
            }
        });
    }

    // 封装蒙层中的地图
    function getLocation() {
        /*geolocation 地理位置 */
        let geolocation = new BMap.Geolocation()
        /* 获取当前位置 */
        geolocation.getCurrentPosition(function (r) {
            //如果获取当前位置成功了 
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                // console.log(r)
                // 电脑端模拟跑步
                //经度
                let lng = window.parseFloat(r.longitude) + moveNum
                // //纬度
                let lat = window.parseFloat(r.latitude) + moveNum
                moveNum += 0.001
                /* // 手机端
                // 经度
                let lng = window.parseFloat(r.longitude)
                //纬度
                let lat = window.parseFloat(r.latitude) */
                // console.log(moveNum);
                // 存放每次的坐标点
                pointArr.push({ lng: lng, lat: lat })
                // 画线
                if (pointArr.length > 1) {
                    let startPoint = pointArr[pointArr.length - 2] //起点
                    let curPoint = pointArr[pointArr.length - 1] //当前位置
                    // let sPoint = pointArr[0] //起点固定

                    // 调用画线函数
                    drawLine(startPoint, curPoint)

                    // 调用距离函数 计算距离
                    let distance = window.$utils.calcDistance(startPoint, curPoint)
                    runKm += parseFloat(distance)
                    // 把计算的结果渲染到页面
                    kilNum.textContent = runKm.toFixed(2)
                    runLiData.textContent = runKm.toFixed(2)
                    kiloNum.textContent = runKm.toFixed(2)

                    //  计算配速
                    let Pace = window.$utils.calcPace(runKm, timing)
                    // 把计算的结果渲染到页面
                    runPace.textContent = Pace
                    runSpeed.textContent = Pace

                    // 计算千卡
                    kio = window.$utils.calCalorie(runKm)
                    // 把计算的结果渲染到页面
                    runCalorie.textContent = kio
                    runConsumeKcal.textContent = kio
                }
                //根据当前的经度和纬度绘制地图
                // 创建点坐标  
                let point = new BMap.Point(lng, lat);
                // 初始化地图，设置中心点坐标和地图级别
                mapa.centerAndZoom(point, 18);
                // 隐藏地图标识
                let baidulogos = document.querySelectorAll('.anchorBL')
                baidulogos.forEach(function (v) {
                    v.style.display = 'none'
                })
            }
            else {
                //如果获取当前位置失败了 
                alert('failed' + this.getStatus());
            }
        });
    }

    // 封装画线的函数
    function drawLine(sPoint, cPoint) {
        var polyline = new BMap.Polyline([
            new BMap.Point(sPoint.lng, sPoint.lat),
            new BMap.Point(cPoint.lng, cPoint.lat)
        ],
            { strokeColor: "red", strokeWeight: 6, strokeOpacity: 0.5 }
        );
        mapa.addOverlay(polyline);
    }

    // 封装累积跑步距离
    function getTotalRun() {
        // 发送jajax请求
        axios.get(window.$utils.BASE_URL + '/sports/exerciseData?id=' + userId)
            .then((result) => {
                let res = result.data
                //  console.log(res);
                if (res.status === 0) {
                    runNum.textContent = res.data.runkm.toFixed(2)
                }
            })
            .catch((error) => {
                console.log(error);
            })
    }

    // 给runGoBtn GO按钮 添加事件
    runGoBtn.addEventListener('click', function () {
        // 显示倒计时蒙层
        countDownMask.style.display = 'block'
        // 定义数组，保存倒计时的值
        let textArr = [3, 2, 1, 'GO']
        // 定义倒计时数字索引
        let index = 0
        // 隐藏GO
        runGoBtn.style.display = 'none'
        // 显示暂停框
        pauseButton.style.display = 'block'
        // 页面初始显示倒计时数字
        countDownNum.textContent = textArr[index]
        // 开启计时器
        timerId = window.setInterval(() => {
            // 索引自增
            index++
            // 判断
            if (index === textArr.length) {
                // 清除计时器
                window.clearInterval(timerId)
                // 显示运动中蒙层
                motionMask.style.display = 'block'
                // 隐藏倒计时蒙层
                countDownMask.style.display = 'none'
                // 调用开始跑步时间的函数
                startRun()
            } else {
                // 把当前倒计时的值渲染到页面
                countDownNum.textContent = textArr[index]
            }
        }, 1000);
    })

    // 定义跑步计时函数
    function startRun() {
        // 先清除计时器
        window.clearInterval(timerId)
        timerId = window.setInterval(function () {
            timing++
            let time = window.$utils.secondToHMS(timing)
            // 默认蒙层中显示用时
            runTime.textContent = time
            // 地图模式中显示用时
            runTimeNum.textContent = time
            // 调用地图蒙层函数
            getLocation()
        }, 1000)
    }

    // 给pauseBtn 暂停按钮 添加事件
    pauseBtn.addEventListener('click', function () {
        // 清除计时器
        window.clearInterval(timerId)
        // 隐藏暂停按钮框
        pauseButton.style.display = 'none'
        // 显示继续&结束按钮框
        continueEndBtn.style.display = 'block'
    })

    // 给continueBtn 继续按钮 添加事件
    continueBtn.addEventListener('click', function () {
        // 计时器继续走
        startRun()
        // 隐藏继续&结束按钮框
        continueEndBtn.style.display = 'none'
        // 显示暂停按钮框
        pauseButton.style.display = 'block'
    })

    // 给GPSBtn GPS按钮 添加事件
    GPSBtn.addEventListener('click', function () {
        // 调用蒙层地图函数
        getLocation()
        // 把默认蒙层中显示的时间赋给地图模式中的时间
        runTimeNum.textContent = runTime.textContent
        // 隐藏默认蒙层
        motionMask.style.display = 'none'
        // 显示地图蒙层
        mapMask.style.display = 'block'
        // 显示返回按钮
        toBackBtn.style.display = 'block'
        // 显示定位按钮
        locationBtn.style.display = 'block'
        // 显示跑步信息框
        locationBox.style.display = 'block'
    })

    // 给toBackBtn 返回按钮 添加事件
    toBackBtn.addEventListener('click', function () {
        // 关闭地图蒙层
        mapMask.style.display = 'none'
        // 显示默认蒙层
        motionMask.style.display = 'block'
        // 隐藏返回按钮
        toBackBtn.style.display = 'none'
        // 隐藏定位按钮
        locationBtn.style.display = 'none'
        // 隐藏跑步信息框
        locationBox.style.display = 'none'
    })

    // 给endBtn 结束按钮 添加事件
    endBtn.addEventListener('click', function () {
        // 调用蒙层地图函数
        getLocation()
        // 清除计时器
        window.clearInterval(timerId)
        // 隐藏默认蒙层
        motionMask.style.display = 'none'
        // 隐藏继续&结束框
        continueEndBtn.style.display = 'none'
        // 显示地图蒙层
        mapMask.style.display = 'block'
        // 显示完成按钮
        finishBtn.style.display = 'block'
        // 显示运动结束信息框
        exerciseBox.style.display = 'block'
        // 把默认地图中的时间赋给结束时间
        runAllTime.textContent = runTime.textContent
        // 显示当前日期
        sportsDate.textContent = window.$utils.getNowDate('/')
        // 平均速度 = 距离/时间
        runAvg = (runKm / timing).toFixed(2)
        runAvgPace.textContent = runAvg
    })

    // 给finishBtn 完成按钮 添加事件
    finishBtn.addEventListener('click', function () {
        // console.log(111);
        // 发送ajax请求
        axios.post(window.$utils.BASE_URL + "/sports/save",
            {
                id: userId, //当前用户id
                type: 1,//类型
                takeTime: timing,//用时
                miles: runKm,//跑步距离
                averagerate: runAvg,//平均速度
                calorie: kio//卡路里
            })
            .then((result) => {
                let res = result.data
                if (res.status === 0) {
                    //  保存成功
                    window.$utils.showToast('icon-check', '保存成功')
                    window.setTimeout(function () {
                        // 刷新页面
                        window.history.go(0)
                    }, 2000)
                } else if (res.status === 1) {
                    // 保存失败
                    window.$utils.showToast('icon-cuo', '保存失败')
                }
            })
            .catch((error) => {
                console.log(error);
            })
    })

})